<template>
  <div>
    <el-row :span="24">
      <el-col :span="8">
        <el-input v-model="userQueryText" placeholder="请输入登录名或者真实姓名"></el-input>
      </el-col>
      <el-col :span="8">
        <el-button @click="userQuery()">查询</el-button>
        <el-button @click="showAddUserDialog=true">增加部门</el-button>
      </el-col>
      <el-col :span="8">
        <p></p>
      </el-col>
      <el-col :span="8">

      </el-col>
    </el-row>
    <el-dialog title="增加用户" :visible.sync="showAddUserDialog" center>
      <el-form :model="userAddForm" :label-position="labelPosition" inline>
        <el-form-item label="登录名" :label-width="formLabelWidth">
          <el-input v-model="userAddForm.loginname" autocomplete="off" style="width: 222px;" placeholder="请输入登录名"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input v-model="userAddForm.name" autocomplete="off" style="width: 222px;" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="userAddForm.pass" autocomplete="off" style="width: 222px;" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="所在科室" :label-width="formLabelWidth">
          <el-select v-model="userAddForm.deptment" placeholder="所在科室">
            <el-option :label="item.deptname" :value="item.id" v-for="item in form.userDeptment" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类别" :label-width="formLabelWidth">
          <el-select v-model="userAddForm.usercategoryname" placeholder="用户类别">
            <el-option :label="item.category" :value="item.id" v-for="item in form.userCategory" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="医生职称" :label-width="formLabelWidth">
          <el-select v-model="userAddForm.doctorposition" placeholder="医生职称">
            <el-option :label="item.position" :value="item.id" v-for="item in form.userDoctorposition" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="挂号级别" :label-width="formLabelWidth">
          <el-select v-model="userAddForm.registeredlevel" placeholder="挂号级别">
            <el-option :label="item.level" :value="item.id" v-for="item in form.userRegisteredLevel" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否参与排班" :label-width="formLabelWidth">
             <el-radio v-model="userAddForm.isscheduling" label="是">是</el-radio>
              <el-radio v-model="userAddForm.isscheduling" label="否">否</el-radio>
        </el-form-item>
      </el-form>
      <div  slot="footer" class="dialog-footer">
        <el-button type="warning" @click="showAdduserDialog = false">取 消</el-button>
        <el-button type="primary" @click="adduserDialog()">创 建</el-button>
      </div>
    </el-dialog>



    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" select-on-indeterminate=true width="80">
      </el-table-column>
      <el-table-column label="登录名" width="120">
        <template slot-scope="scope">
          {{ scope.row.loginname }}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名" width="120">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="用户类别" width="120">
        <template slot-scope="scope">
          {{ scope.row.category }}
        </template>
      </el-table-column>
      <el-table-column label="医生职称" width="120">
        <template slot-scope="scope">
          {{ scope.row.position }}
        </template>
      </el-table-column>
      <el-table-column label="所在科室" width="120">
        <template slot-scope="scope">
          {{ scope.row.deptname }}
        </template>
      </el-table-column>
      <el-table-column label="挂号级别" width="120">
        <template slot-scope="scope">
          {{ scope.row.level }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="edituser(scope.row)">编辑</el-button>
          <el-dialog title="编辑科室" :visible.sync="dialogFormVisible" center>
            <el-form :model="form" :label-position="labelPosition" inline>
              <el-form-item label="登录名" :label-width="formLabelWidth">
                <el-input v-model="form.userData.loginname" autocomplete="off" style="width: 222px;" placeholder="请输入科室编号"></el-input>
              </el-form-item>
              <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="form.userData.name" autocomplete="off" style="width: 222px;" placeholder="请输入科室编号"></el-input>
              </el-form-item>
              <el-form-item label="密码" show-password="true" :label-width="formLabelWidth">
                <el-input v-model="form.userData.pass" autocomplete="off" style="width: 222px;" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="所在科室" :label-width="formLabelWidth">
                <el-select v-model="form.userData.deptname" placeholder="科室分类">
                  <el-option :label="item.deptname" :value="item.deptname" v-for="item in form.userDeptment"
                    :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户类别" :label-width="formLabelWidth">
                <el-select v-model="form.userData.category" placeholder="科室分类">
                  <el-option :label="item.category" :value="item.category" v-for="item in form.userCategory" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="医生职称" :label-width="formLabelWidth">
                <el-select v-model="form.userData.position" placeholder="科室分类">
                  <el-option :label="item.position" :value="item.position" v-for="item in form.userDoctorposition" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="挂号级别" :label-width="formLabelWidth">
                <el-select v-model="form.userData.level" placeholder="科室分类">
                  <el-option :label="item.level" :value="item.level" v-for="item in form.userRegisteredLevel" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否参与排班" :label-width="formLabelWidth">
                <el-radio v-model="form.userData.isscheduling" label="是">是</el-radio>
                 <el-radio v-model="form.userData.isscheduling" label="否">否</el-radio>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="warning" @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateuser()">保存</el-button>
              <el-button type="primary" @click="clearUpdate()">清空</el-button>
            </div>
          </el-dialog>

          <template>
            <el-popconfirm :title="username1(scope.row.name)" @onConfirm="handleDelete(scope.$index, scope.row)">
              <el-button size="mini" type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageination">
        <el-pagination background :page-size=pageSize layout="prev, pager, next" @current-change="currentPage" :total="count" ></el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'user',
    data() {
      return {
        tableData: [],
        userAddForm: {

        },
        count: 0,
        userQueryText:'',
        dialogFormVisible: false,
        showAddUserDialog: false,
        labelPosition: "right",
        pageSize: 8,
        form: {
          orginData: {
            loginname: '',
            pass:'',
            name: '',
            category: '',
            position: '',
            deptname:'',
            level:'',
            isscheduling:'',
          },
          userData: {
            originId: "",
          },
          userDeptment: [],
          userDoctorposition: [],
          userCategory: [],
          userRegisteredLevel: [],
          userclassity_value: '',
          usertype_value: '',
        },
        formLabelWidth: '120px',
      }
    },
    computed: {

    },
    methods: {
      onlord1: function() {
        let urlTable = `/hisbg/user?pageNum=1&pageSize=${this.pageSize}`;
        let g_table = this.$axios.get(urlTable);
        g_table.then(res => {
          this.tableData = res.data.list;
          this.count = res.data.count;
        })
      },
      onlord2: function() {
        let urluserDeptment = "/hisbg/deptment";
        let g_userDeptment = this.$axios.get(urluserDeptment);
        g_userDeptment.then(res => {
          this.form.userDeptment = res.data;
        })
      },
      onlord3: function() {
        let urluserDoctorposition = "/hisbg/doctorposition";
        let g_userDoctorposition = this.$axios.get(urluserDoctorposition);
        g_userDoctorposition.then(res => {
          this.form.userDoctorposition = res.data;
        })
      },
      onlord4: function() {
        let urluserCategory = "/hisbg/category";
        let g_userCategory = this.$axios.get(urluserCategory);
        g_userCategory.then(res => {
          this.form.userCategory = res.data;
        })
      },
      onlord5: function() {
        let urluserRegisteredLevel = "/hisbg/registeredlevel";
        let g_userRegisteredLevel = this.$axios.get(urluserRegisteredLevel);
        g_userRegisteredLevel.then(res => {
          this.form.userRegisteredLevel = res.data;
        })
      },
      handleDelete: function(index, row) {
        let id = row.id;
        let url = "/hisbg/deluser?id=" + id;
        let g = this.$axios.get(url);
        let rs;
        g.then(res => {
          rs = res.data;
          if (rs) {
            this.onlord1();
          } else{
            alert("删除失败");
          }
        })
      },
      username1: function(text) {
        return "确定删除" + text + "?";
      },
      currentPage: function(pageNum) {
        let urlTable = `/hisbg/user?pageNum=${pageNum}&pageSize=${this.pageSize}`;
        let g_table = this.$axios.get(urlTable);
        g_table.then(res => {
          this.tableData = res.data.list;
          this.count = res.data.count;
        });
      },
      edituser: function(row) {
        this.dialogFormVisible = true;
        this.form.orginData.loginname = row.loginname;
        this.form.orginData.name = row.name;
        this.form.orginData.category = row.category;
        this.form.orginData.position = row.position;
        this.form.orginData.deptname = row.deptname;
        this.form.orginData.level = row.level;
        this.form.orginData.pass = row.pass;
        this.form.orginData.isscheduling=row.isscheduling;
        this.form.userData = this.form.orginData;
        this.form.userData.originId = row.id;
      },
      updateuser: function() {
        this.dialogFormVisible = false;
        let url = "/hisbg/updateuser";
        let g = this.$axios.post(url, this.$qs.stringify(this.form.userData));
        let rs;
        g.then(res => {
          rs = res.data;
          console.log(rs);
          if (rs) {
            this.onlord1();
            this.userAddForm = {};
          } else{
            alert("编辑失败");
          }
        })
      },
      adduserDialog: function() {
        this.showAdduserDialog = false;
        let url = "/hisbg/adduser";
        let g = this.$axios.post(url, this.$qs.stringify(this.userAddForm));
        let rs;
        g.then(res => {
          rs = res.data;
          console.log(rs);
          if (rs) {
            this.onlord1();
            this.userAddForm = {};
          } else{
            alert("增加失败");
          }
        })
      },
      userQuery:function(){
        if(this.userQueryText){
          let url=`/hisbg/queryUser?name=${this.userQueryText}&longinname=${this.userQueryText}`;
              let g=this.$axios.get(url);
              let rs;
              g.then(res=>{
                rs=res.data;
                if(rs&&rs.length>0){
                  this.tableData=rs;
                }else{
                  alert("查询失败");
                }
              })
          }else{
            // alert("请输入需要查询的科室类别");
            this.onlord1();
          }
      }
    },

    mounted: function() {
      this.onlord1();
      this.onlord2();
      this.onlord3();
      this.onlord4();
      this.onlord5();
    },

  }
</script>

<style>
  .pageination{
      width: 70%;
      text-align: center;
  }
</style>
